<template>
	<view>
		<view class="recharge">
			<view class="img-title u-flex">
				<image src="/static/icon2/eb.png"></image>
				<text>提现e币</text>
			</view>
			<view class="money u-flex">
				<input type="digit" v-model="eb" @input="ebInput" placeholder="请输入e币数量" placeholder-class="money-placeholder"/>
			</view>
		</view>
		<view class="tip">兑换比例：{{vuex_commission.withdrawEcoinMoney}}e币=1元</view>
		<view class="tip">最低提现：{{vuex_commission.withdrawMinMoney}}e币</view>
		<view class="tip">当前最高可提现：{{(vuex_commission.withdrawRatio * Number(vuex_user.ecoin)).toFixed(0) }}e币</view>
		<view class="recharge">
			<view class="title">可兑换金额</view>
			<view class="money u-flex">
				<input type="number" :value="money + '元'" disabled/>
			</view>
		</view>
		
		<view class="recharge">
			<view class="title">提现</view>
			<view class="choose-type u-flex u-flex-wrap">
				<view class="item u-line-1" :class="{active:classify === 1}" @click="classify = 1">微信</view>
				<view class="item u-line-1" :class="{active:classify === 2}" @click="classify = 2">支付宝</view>
			</view>
			<view class="image u-flex">
				<u-upload :show-progress="!1" :action="action" @on-success="uploaded" @on-remove="remove" name="image" :header="{Authorization:token}" max-count="1"></u-upload>
			</view>
			<view class="input">
				<input type="text" v-model="real_name" placeholder="请输入真实姓名"/>
			</view>
		</view>
		<view class="recharge-btn" @click="submit">确定提现</view>
		<view style="height: 50rpx;box-sizing: content-box;" class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				action:'',
				eb:'',
				url:'',
				real_name:'',
				classify:1// 提现方式:1=微信,2=支付宝
			}
		},
		methods: {
			submit(){
				this.$u.api.withdraw({
					money:this.eb,
					qr:this.url,
					type:this.classify,
					name:this.real_name
				}).then(res=>{
					uni.showModal({
						content:'提交成功',
						showCancel:!1,
						success: () => {
							this.$app.back()
						}
					})
				})
			},
			uploaded(res,name){
				this.url = res.data[0]
				this.$u.toast('上传成功')
			},
			remove(){
				this.url = ''
			},
			ebInput(e){
				this.$u.debounce(()=>{
					let cur = Number(e.detail.value)
					if(cur == 0){
						return
					}
					if(cur < this.vuex_commission.withdrawMinMoney){
					 this.$u.toast('提现金额不能低于最低提现金额')
					 this.eb = this.vuex_commission.withdrawMinMoney
					}
					if(cur > (this.vuex_commission.withdrawRatio * Number(this.vuex_user.ecoin))){
						this.$u.toast('提现金额不能高于\r\n当前e币的' + this.vuex_commission.withdrawRatio*100 + '%')
						this.eb = (this.vuex_commission.withdrawRatio * Number(this.vuex_user.ecoin)).toFixed(0)
					}
				},800)
			}
		},
		onLoad() {
			// 图片上传地址
			this.action = this.$app.baseUrl + this.$u.api.uploadImageUrl
		},
		computed:{
			money({eb}){
				return this.$app.math.exc(Number(eb),this.vuex_commission.withdrawEcoinMoney)
			}
		}
	}
</script>

<style lang="scss">
	page{background-color: #F9F9F9;}
	.tip{color: #F55332;padding-top: 10rpx;padding-left: 58rpx;}
	.recharge{margin: 40rpx 50rpx 0;background-color: #fff;padding: 20rpx 30rpx;border-radius: 24rpx;
		.title{font-weight: bold;font-size: 30rpx;padding: 10rpx 0;}
		.img-title{
			image{width: 36rpx;height: 36rpx;display: block;flex-shrink: 0;margin-right: 20rpx;}
			text{font-weight: bold;color: #000000;}
		}
		.money{
			text{font-weight: bold;font-size: 50rpx;color: #000;}
			input{line-height: 110rpx;font-size: 40rpx;height: 110rpx;flex: 1;font-weight: bold;}
		}
		// 提现
		.choose-type{
			justify-content: space-around;padding-bottom: 20rpx;
			.item{border: 1rpx solid #c3c3c3;border-radius: 10rpx;background-color: #f1f1f1;color: #333;width: 27.33%;margin: 10rpx 3%;text-align: center;line-height: 62rpx;
				&.active{border-color: $tc;color: $tc;background-color: rgba($color: $tc, $alpha: .1)}
			}
		}
		// 上传图片
		.image{padding: 0 0 40rpx;justify-content: center;}
		.input{padding: 0 40rpx 30rpx;
			input{height: 70rpx;line-height: 70rpx;text-align: center;background-color: #f5f5f5;font-weight: bold;border-radius: 100rpx;}
		}
	}
	.money-placeholder{font-weight: normal!important;font-size: 32rpx;}
	.recharge-btn{margin: 60rpx 50rpx 0;background-color: $tc;color: #fff;font-size: 30rpx;text-align: center;border-radius: 100rpx;line-height: 80rpx;}
</style>
